﻿@page "/colorpicker"

<RadzenExample Name="ColorPicker">
    <div class="row">
        <div class="col-md-6 text-center">
            <svg viewBox="0 0 162 132" style="max-width: 320px; width: 100%; fill: @color" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M1.29477 24.6984C25.7628 11.5979 46.6508 12.9238 67.3361 1.63629C78.4325 4.06733 86.6932 3.09548 94.3293 1.37421C117.758 12.1606 138.358 13.89 160.371 24.9604C158.541 36.5199 154.512 46.5082 147.791 54.5742C139.638 50.2043 131.923 48.4679 124.467 48.2845L123.943 126.905C91.8215 132.888 64.5959 130.303 37.9844 126.643L37.7224 48.5466C28.3517 48.2744 21.2219 51.7371 13.8741 54.8363C6.80686 45.2009 3.50523 35.0276 1.29477 24.6984Z" stroke="black" stroke-width="2"/>
            <path d="M4.96375 23.388C7.17842 34.1365 11.0472 44.1749 18.5913 52.7397" stroke="black"/>
            <path d="M39.0327 122.45C67.1614 127.055 95.2902 128.043 123.419 122.188" stroke="black"/>
            <path d="M61.8929 4.69971C61.6648 7.02441 66.4672 19.8114 80.2377 20.1618C94.2702 20.5189 100.016 5.48093 99.6308 3.91351" stroke="black"/>
            <path d="M67.0057 2.58041C66.8366 4.29663 70.3973 13.7367 80.6075 13.9954C91.0119 14.259 95.2725 3.15716 94.9866 2" fill="none" stroke="black"/>
            <path d="M37.8428 12.5618C40.4187 22.4472 44.6808 34.0507 37.5807 47.9411" stroke="black"/>
            <path d="M124.056 12.7636C121.48 22.649 117.218 34.2525 124.318 48.1429" stroke="black"/>
            <path d="M156.964 23.1259C154.749 33.8744 150.88 43.9128 143.336 52.4777" stroke="black"/>
            <path d="M77.33 55.1031C76.8742 54.9752 76.6466 54.9325 76.3641 54.9325C75.8216 54.9325 75.4089 55.1031 75.1054 55.4547C74.8339 55.7637 74.7255 56.0088 74.6602 56.5206V58.4918C74.6602 59.0676 74.682 59.3763 74.7362 59.8775H73.1842C73.2385 59.3552 73.2602 59.0463 73.2602 58.4918V55.1458C73.2602 54.4957 73.2492 54.1973 73.1842 53.7605H74.6602V54.7622C75.0508 54.0057 75.7239 53.6432 76.7005 53.6432C76.9609 53.6432 77.2213 53.675 77.7096 53.7605L77.33 55.1031Z" fill="#F36F45"/>
            <path d="M82.6272 59.1843C82.1931 59.5892 81.9216 59.7391 81.4765 59.8558C81.1619 59.9412 80.8145 59.9839 80.4674 59.9839C79.1434 59.9839 78.3405 59.3125 78.3405 58.1937C78.3405 57.4474 78.8181 56.7766 79.5668 56.4673C80.272 56.1797 81.0752 56.0729 82.6272 56.041V55.4974C82.6272 54.8792 82.2038 54.5594 81.3791 54.5594C80.945 54.5594 80.5002 54.6768 80.2505 54.8684C80.0444 55.0176 79.9466 55.1668 79.8165 55.5503L78.4275 55.3052C78.6772 54.687 78.8726 54.4099 79.285 54.122C79.8168 53.7385 80.4246 53.5787 81.3577 53.5787C82.3996 53.5787 83.0291 53.7598 83.4957 54.2075C83.8649 54.5486 84.0058 54.9535 84.0058 55.6782V58.5447C84.0058 59.1097 84.0275 59.3976 84.0924 59.8771H82.6275V59.1843H82.6272ZM82.6272 56.9682C80.5544 57.0109 79.7405 57.3626 79.7405 58.1937C79.7405 58.6946 80.1203 59.0036 80.7278 59.0036C81.3031 59.0036 81.8674 58.7906 82.2363 58.4386C82.4966 58.1832 82.6268 57.874 82.6268 57.5006V56.9682H82.6272Z" fill="#F36F45"/>
            <path d="M90.2574 59.3552C90.2574 59.2274 90.2574 59.11 90.2678 58.9713C89.7035 59.7493 89.1285 60.0267 88.0759 60.0267C87.3158 60.0267 86.7412 59.8558 86.2632 59.4831C85.5363 58.9289 85.135 57.9591 85.135 56.8084C85.135 54.8582 86.2743 53.6221 88.0649 53.6221C88.7379 53.6221 89.2912 53.7822 89.7146 54.1125C89.91 54.2617 90.0292 54.3895 90.2678 54.6985C90.2678 54.5706 90.2678 54.5706 90.2574 54.3573C90.2464 54.2827 90.2464 54.0803 90.2464 53.8992V52.8333C90.2464 52.1941 90.225 51.8424 90.1704 51.3948H91.7006C91.6464 51.9065 91.6243 52.2792 91.6243 52.8228V58.4386C91.6243 59.0676 91.6461 59.4085 91.7006 59.8774H90.2574V59.3552ZM88.3256 58.8862C88.9009 58.8862 89.4542 58.6197 89.7798 58.1829C90.0513 57.8312 90.2035 57.309 90.2035 56.7549C90.2035 56.2326 89.997 55.6785 89.6824 55.3377C89.3457 54.9752 88.7925 54.7409 88.2714 54.7409C87.2184 54.7409 86.5461 55.5507 86.5461 56.819C86.5461 58.0869 87.2405 58.8862 88.3256 58.8862Z" fill="#F36F45"/>
            <path d="M97.9529 59.9521C97.5085 59.8988 97.1828 59.8771 96.5208 59.8771H94.0247C93.2542 59.8771 93.0156 59.8876 92.69 59.909V58.7794C93.0374 58.4491 93.2546 58.2039 93.5146 57.8736L95.6094 55.2733C95.7179 55.1454 95.7831 55.0603 95.913 54.9321H95.8156C95.7286 54.943 95.5987 54.943 95.4247 54.943H94.3179C93.7425 54.943 93.3413 54.9644 92.9068 55.0176V53.6855C93.3955 53.7388 93.7533 53.7602 94.3179 53.7602H96.4231C97.2153 53.7602 97.4104 53.7602 97.7361 53.7279V54.7829C97.4104 55.1241 97.1289 55.433 96.9114 55.6996L94.8604 58.2467C94.839 58.2894 94.8169 58.2999 94.7302 58.3959C94.665 58.4813 94.665 58.4813 94.4913 58.6834C94.7302 58.6729 94.9689 58.6729 95.1422 58.6729H96.5312C97.1607 58.6729 97.5406 58.6516 97.9526 58.598V59.9521H97.9529Z" fill="white"/>
            <path d="M100.048 57.1706C100.103 57.7566 100.2 58.0547 100.45 58.364C100.765 58.7478 101.253 58.9608 101.807 58.9608C102.338 58.9608 102.794 58.7689 103.109 58.4281C103.239 58.2785 103.315 58.1612 103.423 57.8736L104.704 58.2782C104.454 58.7899 104.313 58.9924 104.042 59.2586C103.477 59.8018 102.718 60.0792 101.806 60.0792C99.8854 60.0792 98.6699 58.8218 98.6699 56.8288C98.6699 54.8572 99.8747 53.5679 101.73 53.5679C103 53.5679 103.998 54.1861 104.433 55.2519C104.639 55.7633 104.715 56.1472 104.747 56.8715C104.747 56.8929 104.747 56.9248 104.769 57.1703H100.048V57.1706ZM103.359 56.1153C103.282 55.6466 103.152 55.3587 102.881 55.0922C102.588 54.8046 102.219 54.6659 101.709 54.6659C100.862 54.6659 100.244 55.22 100.081 56.1153H103.359Z" fill="white"/>
            <path d="M105.845 59.8774C105.91 59.419 105.932 59.089 105.932 58.4918V55.1458C105.932 54.5594 105.911 54.1973 105.845 53.7605H107.321V54.3251C107.321 54.4848 107.321 54.517 107.299 54.7836C107.961 53.9524 108.536 53.654 109.513 53.654C110.349 53.654 110.967 53.9205 111.358 54.4424C111.618 54.7941 111.727 55.2204 111.727 55.9345V58.4918C111.727 59.0778 111.749 59.4831 111.814 59.8774H110.24C110.294 59.3979 110.316 59.0354 110.316 58.4918V56.1262C110.316 55.6785 110.262 55.3909 110.132 55.1882C109.958 54.9111 109.632 54.751 109.22 54.751C108.438 54.751 107.798 55.2841 107.321 56.3391V58.4915C107.321 59.0141 107.342 59.4186 107.408 59.8771H105.845V59.8774Z" fill="white"/>
            <path d="M60.5 47C55.2532 47 51 51.2532 51 56.4998C51 60.4533 53.4157 63.842 56.8515 65.2724C56.8173 63.6038 56.7306 61.9644 56.6892 61.0248H59.3073C59.1975 61.6463 59.143 63.8236 59.1558 65.9034C59.5952 65.9655 60.0435 66 60.5 66C65.7464 66 70 61.7468 70 56.5002C70 51.2535 65.7468 47 60.5 47ZM59.3073 60.1769H56.6892C57.0405 58.079 56.773 53.3497 56.6892 51.4533H59.3073C59.114 52.5487 59.0914 58.4494 59.3073 60.1769ZM63.2627 55.46C64.2625 55.7019 66.0952 56.8078 66.0952 56.8078C66.0952 56.8078 63.9608 56.9448 62.9574 56.7016C62.165 56.512 61.5905 55.9602 61.3864 55.7364C60.853 56.2428 60.4208 56.6441 59.7513 57.6094L59.5834 57.6426L59.5334 57.5183L59.5538 57.4759C60.0225 56.7983 60.2542 56.5623 60.6699 56.1117L61.1422 55.6332C61.7841 55.0156 62.2452 54.6916 62.3671 54.6163C62.5193 54.2686 62.9715 53.3806 63.8336 52.8254C64.9208 52.1257 67.5071 51.4175 67.5071 51.4175C67.5071 51.4175 65.7898 53.4755 64.7062 54.1762C63.904 54.6925 62.9814 54.7668 62.5492 54.7724L62.5374 54.7915C62.5295 54.7934 62.1565 55.0307 61.599 55.531C61.9612 55.4271 62.5998 55.2979 63.2627 55.46Z" fill="#F36F45"/>
            </svg>
            <h3>Choose T-Shirt color:</h3>
            <RadzenColorPicker @bind-Value=@color ShowHSV=@showHSV ShowRGBA=@showRGBA ShowColors=@showColors ShowButton=@showButton Change=@OnChange />
        </div>
        <div class="col-md-6">
            <RadzenFieldset Text="ColorPicker Configuration">
                <p>
                    <label><RadzenCheckBox @bind-Value=@showHSV /> Show HSV picker</label>
                </p>
                <p>
                    <label><RadzenCheckBox @bind-Value=@showRGBA /> Show RGBA picker</label>
                </p>
                <p>
                    <label><RadzenCheckBox @bind-Value=@showColors /> Show Predefined colors</label>
                </p>
                <p>
                    <label><RadzenCheckBox @bind-Value=@showButton /> Show OK button</label>
                </p>
            </RadzenFieldset>
        </div>
    </div>
</RadzenExample>

<EventConsole @ref=@console />

@code {
    EventConsole console;
    string color = "rgb(68, 58, 110)";
    bool showHSV = true;
    bool showRGBA = true;
    bool showColors = true;
    bool showButton = false;

    void OnChange(string value)
    {
        console.Log($"Value changed to: {value}");
    }
}